import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Form, Input, Button, Checkbox, message } from "antd";
import { Observer } from "mobx-react";

import http from "../../services/service";
import { Context } from "../../store/MyContext";

import "./Login.scss";

class Login extends Component {
  state = {
    registerState: false,
  };
  formRef = React.createRef();

  //用户登入
  onFinish = (values) => {
    let that = this;
    const key = "login";
    console.log("Success:", values);
    http.post("/api1/searchUser", { ...values }).then((rep) => {
      if (rep.data.error === 0) {
        sessionStorage.setItem("user", JSON.stringify(rep.data.data));
        that.context.setUser(rep.data.data);
        console.log(that.context.user);
        // that.props.history.push("/home");
        message.loading({ content: "正在登入...", key });
        setTimeout(() => {
          message.success({ content: "登入成功!", key, duration: 2 });
        }, 500);
      } else {
        setTimeout(() => {
          message.error({ content: "用户名或密码错误", key, duration: 2 });
        }, 500);
      }
    });
  };

  //用户注册
  toRegister = () => {
    this.setState({ registerState: true });
    let formData = this.formRef.current.getFieldsValue();
    let arr = [];
    arr.push(formData);
    let that = this;
    const key = "signin";
    http.post("/api1/addUser", { ...formData }).then((rep) => {
      if (rep.data.error === 0) {
        sessionStorage.setItem("user", JSON.stringify(arr));
        that.context.setUser(arr);
        console.log(that.context.user);
        // that.props.history.push("/home");
        message.loading({ content: "正在注册...", key });
        setTimeout(() => {
          message.success({ content: "注册成功!", key, duration: 2 });
        }, 500);
      } else {
        setTimeout(() => {
          message.error({ content: "请输入用户名或密码", key, duration: 2 });
        }, 500);
      }
    });
  };

  onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  goHomePage = () => {
    this.props.history.push("/");
  };

  render() {
    const { registerState } = this.state;
    return (
      <Observer>
        {() => (
          <div id='login_page'>
            <img
              src='http://ww1.sinaimg.cn/large/005NUwyggy1gtjwf81eecj606a0kdmyl02.jpg'
              alt='bg'
            />
            <div className='login_container'>
              <div className='title'>
                <h1>{registerState ? "注册" : "登入"}</h1>
                <h3>体检预约服务后台管理系统</h3>
              </div>
              <div className='form'>
                <Form
                  ref={this.formRef}
                  name='basic'
                  labelCol={{
                    span: 8,
                  }}
                  wrapperCol={{
                    span: 16,
                  }}
                  initialValues={{
                    remember: true,
                  }}
                  onFinish={this.onFinish}
                  onFinishFailed={this.onFinishFailed}
                >
                  <Form.Item
                    className='formItem'
                    label='用户名'
                    name='userName'
                    rules={[
                      {
                        required: true,
                        message: "请输入用户名",
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    className='formItem'
                    label='密码'
                    name='userPassword'
                    rules={[
                      {
                        required: true,
                        message: "请输入密码",
                      },
                    ]}
                  >
                    <Input.Password />
                  </Form.Item>
                  <Form.Item
                    className='formItem'
                    label='手机号码'
                    name='userTel'
                    rules={[
                      {
                        required: true,
                        message: "请输入手机号码",
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name='remember'
                    valuePropName='checked'
                    wrapperCol={{
                      offset: 0,
                      span: 24,
                    }}
                  >
                    <div className='remAndForget'>
                      <Checkbox>十天内免登入</Checkbox>
                      <span className='forgetPw'>忘记密码？</span>
                    </div>
                  </Form.Item>

                  <Form.Item
                    wrapperCol={{
                      offset: 0,
                      span: 24,
                    }}
                  >
                    <div className='btnContainer'>
                      <Button
                        className='loginBtn'
                        type='primary'
                        htmlType='submit'
                      >
                        登入
                      </Button>
                      <Button
                        className='signInBtn'
                        type='primary'
                        htmlType='button'
                        // 如果需要传参的话就用回调函数进行处理
                        onClick={() => this.toRegister(true)}
                      >
                        注册
                      </Button>
                    </div>
                  </Form.Item>
                </Form>
                {/* <div className="logo">
              <img src="" alt="" />
              <span className="logoName">ANTD ADMIN</span>
            </div>
            <div className="username">
              <Button type="primary">Button</Button>
            </div>
            <div className="pwd"></div>
            <div className="loginBtn"></div>*/}
                <div className='notes'>
                  Username:chenruo , Password: chenruo Tel:110
                </div>
                <div className='notes'></div>
              </div>
            </div>

            <img
              src='http://ww1.sinaimg.cn/large/005NUwyggy1gtjwg83hjjj60au0k4dhx02.jpg'
              alt='bg'
            />
          </div>
        )}
      </Observer>
    );
  }
}

Login.contextType = Context;

export default withRouter(Login);
